<template>
	<div class="detail" v-loading="loading"  style="min-width: 800px;">
    <div class="top">
      <el-button @click="toRoleManege()" size="small">返回</el-button>
      <el-divider></el-divider>
    </div>
    <div class="formPart">
      <el-form :model="formData" :rules="rules" ref="formData1" :inline="true" label-width="200px" class="demo-formData">
        <el-form-item label="类别：" prop="guard_name">
          <el-select v-model="formData.guard_name" style="width: 100%" placeholder="请选择活动区域">
            <el-option label="平台" value="admin"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="节点：" prop="name">
          <el-input v-model="formData.label"></el-input>
        </el-form-item>
        <el-form-item label="名称：" prop="label">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="描述：" prop="desc">
          <el-input v-model="formData.desc"></el-input>
        </el-form-item>
        <el-form-item class="butt">
          <div style="min-width: 200px;">
            <el-button type="primary" @click="addAuth" v-if="!gid">创建</el-button>
            <el-button type="primary" @click="EditRoles" v-if="gid">编辑</el-button>
            <el-button >重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
	import {ref,reactive,onMounted,set} from "vue"
    import { useRouter,useRoute } from 'vue-router';
    import { ElMessage } from "element-plus";
    import {authorityApi} from "/@/api/system/authority/index"
    const authApi = authorityApi()
    const permissionValue = ref([])
    const formData =ref({
        guard_name: "admin",
        name: "",
        label: "",
        desc: "",
    })
    const gid = ref(null)
    const router= useRouter()
    const route = useRoute()
    const toRoleManege = ()=>{
        router.go(-1)
    }
    const loading = ref(false)
    const formData1 = ref(null)
    let rules = ref({
        guard_name: [
          { required: true, message: "请选择类别", trigger: "change" },
        ],
        name: [{ required: true, message: "请输入节点", trigger: "blur" }],
        label: [{ required: true, message: "请输入名称", trigger: "blur" }],
    })

    // 添加角色
    const addAuth = (async()=>{
        loading.value=true
        let data = formData.value
        let res = await authApi.createPermission(data);
        if(res.isSuccess){
           
            loading.value=false
          ElMessage.success('添加成功')
          formData1.value.resetFields()
          
          router.go(-1)
        }
    })
    const filterMethod = (query:any, item:any)=> {
    
      return item.label.indexOf(query) > -1;
    }
    // 编辑跳转过来的回显
    const echoData = ( async () =>{
        if(gid.value){
          let res = await authApi.getPermissionDetail({id:gid.value});
       
          if(res.isSuccess){
            formData.value = res.returnData
            permissionValue.value = formData.value.permissions.map((item) => {
                return item.id;
            });
          }
        }
    })
    // 编辑用户
    const EditRoles = (async ()=>{
      let data = formData.value;
      data.id = gid.value
      let res =await authApi.updatePermission(data);
      if(res.isSuccess){
        ElMessage.success('编辑成功')
        formData1.value.resetFields()
        router.go(-1)
      }
    })

    onMounted(()=>{
      // 获取路由里传递的参数
      gid.value = route.query.id
  
    //   getRolesList()
      echoData()
    })
</script>

<style scoped lang="scss">
.detail {
  .top {
    margin: 24px 20px 0 20px;
  }

  .formPart {
    width: 95%;
    margin: 0 auto;

    .el-form-item {
      margin: 20px 0;
      width: 50%;

      ::v-deep .el-form-item__content {
        width: 70% !important;
      }
    }

    .el-input {
      width: 350px;
      width: 100%;
    }

    .butt {
        width: 100%;
      margin: 20px auto;
      text-align: center;
      padding: 0 45%;
    }
  }
}

::v-deep .el-transfer-panel {
  width: 350px;
}

::v-deep .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
  font-size: 14px !important;
}

::v-deep .el-transfer-panel__body {
  height: 330px;
}

::v-deep .el-transfer-panel__list.is-filterable {
  height: 275px;
  // padding-top: 0;
}

::v-deep .el-transfer {
  .el-transfer__buttons {
    .el-button {
      padding: 10px;
    }
  }
}
</style>